<template>
  <div>
    <div class="header">
        <span><img src="@/assets/后台管理.png" alt="" class="icon"></span><p>后台管理系统</p>
        <button class="btn" @click="logout">退出登录</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    logout() {
      // 1、清空tag
      localStorage.removeItem('tag')
      // 2、跳转到登录页面
      this.$router.replace('/login')
    }
  },
  components: {}
}
</script>
<style scoped>
html {
  font-family: 'Orbitron', sans-serif;
}
  * {
    margin: 0;
    padding: 0;
  }
  .header {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 70px;
    background-color: #0057a0;
    text-align: center;
    line-height: 70px;
    font-size: 22px;
    color: white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .icon {
    width: 25px;
    height: 25px;
    position: relative;
    top: 5px;
    right: 10px;
  }
  .btn {
    position: relative;
    left: 600px;
    top: 20px;
    height: 30px;
    width: 80px;
    background-color: #27AE60;
    border-radius: 3px;
    border: 1px solid #27AE60;
    color: white;
    cursor: pointer;
  }
</style>
